/**
 * K线图
 */
import React  from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const KLine=({
	data=[
		["20171226000000",51.00,51.90,50.10,53.39,17262791.00,895024443.38],
		["20171227000000",51.99,52.91,51.50,53.50,20363194.00,1076839809.38],
		["20171228000000",52.70,52.90,52.53,53.60,14183451.00,752768754.45],
		["20171229000000",52.94,53.21,52.51,53.48,8514334.00,450532184.77],
		["20180102000000",53.25,53.23,52.70,53.70,11233456.00,598330432.23],
		["20180103000000",53.52,56.86,53.25,57.51,32858777.00,1842306212.59],
		["20180104000000",56.50,57.82,56.29,59.07,27560505.00,1598814840.46],
		["20180105000000",57.75,57.58,57.10,58.88,11696667.00,676069885.50]
	],
	openTime="2017-12-26 11:20",
	buyPrice=51.3,
	closeTime="2018-01-05 09:39",
	sellPrice=58.74,
	tradeType="Buy"
})=>{
	const colors=['#00da3c','#ec0000']
	let openTime1,closeTime1

	const dates=data.map((item,i)=>{
		const hh=parseInt(moment(item[0],'YYYYMMDDHHmmss').format('HH'))
		openTime1=moment(openTime).format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
		closeTime1=moment(closeTime).format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
		return moment(item[0],'YYYYMMDDHHmmss').format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
	})
	const myProps={
		option : {
				color:colors,
				backgroundColor: '#fff',
				animation: false,
				tooltip: {
						trigger: 'axis',
						axisPointer: {
								type: 'cross'
						},
						backgroundColor: 'rgba(245, 245, 245, 0.8)',
						borderWidth: 1,
						borderColor: '#ccc',
						padding: 10,
						textStyle: {
								color: '#000'
						}
				},
				grid: [
						{
								left: '5%',
								right: '5%',
								top:'10%',
								height: '50%'
						},
						{
								left: '5%',
								right: '5%',
								top: '70%',
								height: '12%'
						}
				],
				xAxis: [{
					type: 'category',
					data: dates,
					boundaryGap: false,
					axisLine: { lineStyle: { color: '#777' } },
					axisLabel: {
						formatter: value => {
							let text = ''
							let values = value.split(' ');
							text = values.length === 2 ? `${values[0]}\n${values[1]}` : value;
							return text;
						},
						lineHeight: 10,
						fontSize: 10,
					},
					min: 'dataMin',
					max: 'dataMax',
					axisPointer: {
						show: true,
					},
				}, {
					type: 'category',
					gridIndex: 1,
					data: dates,
					scale: true,
					boundaryGap: false,
					splitLine: { show: false },
					axisLabel: { show: false },
					axisTick: { show: false },
					axisLine: { lineStyle: { color: '#777' } },
					splitNumber: 20,
					min: 'dataMin',
					max: 'dataMax',
				}],
				axisPointer: {
					link: { xAxisIndex: 'all' },
					label: {
						backgroundColor: '#777',
					},
				},
				yAxis: [
						{
								scale: true
						},
						{
								scale: true,
								gridIndex: 1,
								splitNumber: 2,
								axisLabel: {show: false},
								axisLine: {show: false},
								axisTick: {show: false},
								splitLine: {show: false}
						}
				],
				dataZoom: [
						{
								type: 'inside',
								xAxisIndex: [0, 1],
								start: 0,
								end: 100
						},
						{
								show: true,
								xAxisIndex: [0, 1],
								type: 'slider',
								top: '85%',
								start: 0,
								end: 100
						}
				],
				series: [
						{
								name: '分钟K线图',
								type: 'candlestick',
								data: data.map((item,i)=>[item[1],item[2],item[3],item[4]]),
								itemStyle: {
										normal: {
												color: colors[0],
												color0: colors[1],
												borderColor: null,
												borderColor0: null
										}
								},
								markPoint: {
									data: tradeType==='Buy'?[
											{
													name: '买',
													coord: [closeTime1, buyPrice],
													value: buyPrice,
													itemStyle: {
								            normal: { color: colors[1] },
								          },
								          label: {
								            normal: {
								              formatter: value => '买',
								            },
								          }
											},
											{
													name: '卖',
													coord: [openTime1, sellPrice],
													value: sellPrice,
													itemStyle: {
								            normal: { color: colors[0] },
								          },
								          label: {
								            normal: {
								              formatter: value => '卖',
								            },
								          }
											}
									]:[
											{
													name: '卖',
													coord: [closeTime1, sellPrice],
													value: sellPrice,
													itemStyle: {
								            normal: { color: colors[0] },
								          },
								          label: {
								            normal: {
								              formatter: value => '卖',
								            },
								          }
											},
											{
													name: '买',
													coord: [openTime1, buyPrice],
													value: buyPrice,
													itemStyle: {
								            normal: { color: colors[1] },
								          },
								          label: {
								            normal: {
								              formatter: value => '买',
								            },
								          }
											}
									]
								},

						},
						{
								name: 'Volume',
								type: 'bar',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: data.map((item,i)=>item[2]-item[1]>=0?[i,item[5],1]:[i,item[5],-1]),
								itemStyle: {
										normal: {
											color: (p)=>p.value[2]>0?colors[0]:colors[1]

										}
									}
						}
				]
		}
	}
  return(
    <div  className={`chart`} style={{height:400}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

KLine.propTypes={
	// data
}

export default KLine
